<template>
  <q-page class="flex flex-center">
    <div>
      <q-form @submit="onSubmit" class="q-gutter-y-md login-form">
        <q-input
          v-model="data.mobile"
          type="text"
          label="账号"
          lazy-rules
          :rules="[(val) => (val && val.length > 0) || 'Please type something']"
        />
        <q-input
          v-model="data.password"
          :type="data.isPwd ? 'password' : 'text'"
          label="密码"
        >
          <template v-slot:append>
            <q-icon
              :name="data.isPwd ? 'visibility_off' : 'visibility'"
              class="cursor-pointer"
              @click="data.isPwd = !data.isPwd"
            />
          </template>
        </q-input>
        <q-btn
          label="登录"
          unelevated
          class="full-width"
          color="primary"
          :loading="data.loading"
          type="submit"
        />
      </q-form>
    </div>
  </q-page>
</template>

<style lang="scss" scoped>
.login-form {
  min-width: 375px;
}
</style>

<script>
import { useQuasar } from "quasar";
import { api } from "src/boot/axios";
import { defineComponent, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default defineComponent({
  name: "PagesLoginPageVue",
  setup() {
    onMounted(() => {});
    const $q = useQuasar();
    const $store = useStore();
    const $router = useRouter();
    const data = reactive({
      mobile: "13566667777",
      password: "000000",
      isPwd: true,
      loading: false,
    });
    function onSubmit() {
      data.loading = true;
      api
        .post("/user/login", {
          mobile: data.mobile,
          password: data.password,
        })
        .then((res) => {
          if (res.code) {
            $q.notify(res.msg);
            return;
          }
          $store.commit("persisted/setUserinfo", res.data);
          $router.replace("/");
        })
        .finally(() => (data.loading = false));
    }
    return {
      data,
      onSubmit,
    };
  },
});
</script>
